<template>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
    	<div class="time-container">
        <div class="title"></div>
        <div class="end-time">
          <!-- 如果在拼单失效期内，展示此项 -->
          <div class="tip" v-show="!isOver" v-if="status === 0">距伙拼结束</div>
          <!-- 拼单结束时间 -->
          <div class="time" v-if="status === 0">{{countDown}}</div>
        </div>
        <!-- 拼单规则列表 -->
        <div class="rule-container">
          <div class="rule-title">伙拼规则 <span class="gt transition">&gt;</span></div>
          <div class="rule-item transition-middle" v-for="(item, index) in rule" v-bind:key="index">
            <h1>拼单总量需满足以下要求</h1>
            <div class="list">
              <div class="demand">1.拼单总量≥{{item.crowdfundingCount}}件</div>
              <div class="meet">已拼{{item.checkOutCount || 0}}件</div>
            </div>
            <div class="list" v-for="(gsp, index) in (item.checkOutDetail || item.goodsGsp)" v-bind:key="index">
              <div class="demand">{{index + 2}}.若存在{{gsp.specpropertyName}}，{{gsp.specpropertyName}}≥{{gsp.specpropertyCrowdSum}}件</div>
              <div class="meet">已拼{{gsp.checkOutCount || 0}}件</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 拼单结束时间
    time: {
      type: Number,
      default: new Date().getTime()
    },
    // 拼单规则
    rule: {
      type: Array,
      default: () => { return [] }
    },
    status: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      countDown: '',
      isOver: false
    }
  },
  created() {
    this.setEndTime()
  },
  methods: {
    /**
     * 设置结束时间
     */
    setEndTime() {
      // 记录当前时间
      let dateCur = new Date().getTime()

      // 每隔1s刷新一下倒计时数据
      setInterval(() => {
        // 初始化当前时间
        dateCur = (this.rule[0] ? this.rule[0].fightGoodsEndTime : '') - new Date().getTime()

        // 如果当前传入时间存在，则开始计时
        if (this.time || (this.rule[0] && this.rule[0].fightGoodsEndTime)) {
          // 继续显示
          this.isOver = false

          // 如果伙拼结束时间在当前时间前（大于当前时间）
          if (dateCur > 0) {
            this.countDown = `${this.getDay(dateCur)}天${this.getHours(dateCur)}小时${this.getMinutes(dateCur)}分${this.getSecond(dateCur)}秒`
            return
          }

          // 拼单结束
          this.isOver = true

          // 如果伙拼结束时间已经结束（小于当前时间）
          this.countDown = '伙拼已经结束，请等待下一期拼单'
          this.$emit('end')
          return
        }
      }, 1000)
    },

    /**
     * 获取距离当前时间的天数
     * @param  {Number} timestamp 与当前时间相差的毫秒数
     */
    getDay(timestamp) {
      return Math.floor(timestamp / 1000 / 60 / 60 / 24)
    },

    /**
     * 获取距离当前时间的天数
     * @param  {Number} timestamp 与当前时间相差的毫秒数
     */
    getHours(timestamp) {
      return Math.floor(timestamp / 1000 / 60 / 60 - this.getDay(timestamp) * 24)
    },

    /**
     * 获取距离当前时间的分钟
     * @param  {Number} timestamp 与当前时间相差的毫秒数
     */
    getMinutes(timestamp) {
      return Math.floor(timestamp / 1000 / 60 - this.getDay(timestamp) * 24 * 60 - this.getHours(timestamp) * 60)
    },

    /**
     * 获取距离当前时间的秒数
     * @param  {Number} timestamp 与当前时间相差的毫秒数
     */
    getSecond(timestamp) {
      return Math.floor(timestamp / 1000 - this.getDay(timestamp) * 24 * 60 * 60 - this.getHours(timestamp) * 60 * 60 - this.getMinutes(timestamp) * 60)
    }
  }
}
</script>

<style lang="scss" scoped>
.time-container {
  // background-color: #f00385;
  color: #FFFFFF;
  height: 38px;
  line-height: 38px;
  background: #f00385 url(../../../assets/hot.png) no-repeat 10px center;
  .title {
    display: inline-block;
    float: left;
    font-size: 18px;
    height: 38px;
    width: 94px;
    position: relative;
    text-align: center;
  }

  .end-time {
    width: calc(100% - 194px);
    display: inline-block;
    text-align: center;

    .tip {
      display: inline-block;
      font-size: 14px;
      vertical-align: middle;
    }

    .time {
      color: #ffff00;
      display: inline-block;
      font-size: 14px;
      vertical-align: middle;
    }
  }

  .rule-container {
    cursor: pointer;
    display: inline-block;
    float: right;
    font-size: 14px;
    position: relative;
    text-align: center;

    .rule-title {
      border-left: 1px solid #FFFFFF;
      font-size: 14px;
      width: 100px;
      height: 22px;
      line-height: 22px;
      margin: 8px 0px;

      .gt {
        display: inline-block;
      }
    }
    .rule-item {
      border: 1px solid #f00385;
      background-color: #FFFFFF;
      color: #444444;
      cursor: default;
      padding: 14px 10px;
      position: absolute;
      margin-top: 2px;
      width: 222px;
      right: 0px;
      text-align: left;
      opacity: 0;
      z-index: -10;

      h1 {
        font-size: 16px;
        font-weight: 500;
        height: 16px;
        line-height: 16px;
      }

      .list {
        margin-top: 20px;
        font-size: 14px;

        .demand {
          line-height: 14px;
          margin-bottom: 8px;
        }

        .meet {
          color: #ED2D63;
          height: 14px;
          line-height: 14px;
        }
      }
    }
    &:hover {
      .rule-title {
        .gt {
          transform: rotate(90deg);
        }
      }
      .rule-item {
        opacity: 1;
        z-index: 10;
      }
    }
  }

  .mr6 {
    margin-right: 6px;
  }
}

</style>